<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Reportes</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/responsive.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">

    </head>
    <body>

        {% include "topmenu.html" %} <!-- Top menu -->

        <div class="container">
            <div class="row-fluid">

                {% include "sidebar.html" %} <!-- Side bar -->

                <div class="span9">
                    <div class="page-header">
                        <h3>{{titulo_del_informe}}</h3>
                    </div>
                    <div>
                        {% if values %}
                        {% for dimension, valores in values %}
                        <h3>{{dimension}}</h3>
                        {% if valores %}
                        {% for pregunta , grafico in valores %}

                        {% if forloop.counter|divisibleby:2 %}

                        <div class="span6">
                            <p>
                                {{pregunta}}
                            </p>
                            {% load chart_tags %}
                            <br>
                            {% chart %}
                            {{grafico}}
                            {% endchart %}
                        </div>
                    </div>
                    <hr />
                    {% else %}
                    <div class="row-fluid">
                        <div class="span6">
                            {{pregunta}}
                            {% load chart_tags %}
                            {% chart %}
                            {{grafico}}
                            {% endchart %}
                        </div>

                        {% endif %}

                        {% endfor %}

                        {% for dimension, valores in values %}
                        {% if valores|length|divisibleby:2 %}
                        {% else %}
                    </div>
                    <hr>
                    {% endif %}
                    {% endfor %}
                    {% else %}
                    No se disponen datos de esta dimension
                    {% endif %}
                    {% endfor %}
                    {% else %}
                    No existen datos disponibles para elaborar reportes
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- container -->
        {% include "footer.html" %} <!-- Footer -->
        <!-- JS files -->
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
    </body>
</html>